<div>
  <button click.trigger="newItems()">new</button>
  <button click.trigger="clearItems()">clear</button>
  Start:
  <button click.trigger="addItemsAtStart(1)">+1</button>
  <button click.trigger="addItemsAtStart(-1)">-1</button>
  <button click.trigger="addItemsAtStart(10)">+10</button>
  <button click.trigger="addItemsAtStart(-10)">-10</button>
  <button click.trigger="addItemsAtStart(100)">+100</button>
  <button click.trigger="addItemsAtStart(-100)">-100</button>
  End:
  <button click.trigger="addItemsAtEnd(1)" data-testid="add-1">+1</button>
  <button click.trigger="addItemsAtEnd(-1)" data-testid="remove-1">-1</button>
  <button click.trigger="addItemsAtEnd(10)" data-testid="add-10">+10</button>
  <button click.trigger="addItemsAtEnd(-10)" data-testid="remove-10">-10</button>
  <button click.trigger="addItemsAtEnd(100)" data-testid="add-100">+100</button>
  <button click.trigger="addItemsAtEnd(-100)" data-testid="remove-100">-100</button>
  <button click.trigger="addItemsAtEnd(-475)" data-testid="remove-475">-475</button>
  Count:
  <span data-testid="items-count">${items.length}</span>
</div>
<div id="repeat-container" style="overflow: auto hidden; white-space:nowrap; height:100px;">
  <div
    virtual-repeat.for="item of items; layout:horizontal; item-width:120"
    even-row.class="$even" 
    css="
      display:inline-block;
      width:120px;
      height:50px;
      vertical-align: top;
      background-color: ${getColor(items.indexOf(item))};
    "
  >
    ${item.name} @ ${$index}
  </div>
</div>

